<template>
  <div class="immediate_pay">
    <van-nav-bar
      title="生活缴费"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="lifepay_sub_title">{{ object.itemName }}</div>
    <div class="lifepay_devide_info">
      <ul class="immediate_ul">
        <li class="immediate_list">
          <span class="list_left_span">缴费单位</span>
          <span class="list_right_span">{{ object.orgName }}</span>
        </li>
        <li class="immediate_list">
          <span class="list_left_span">缴费户号</span>
          <span class="list_right_span">{{ object.code }}</span>
        </li>
        <li class="immediate_list">
          <span class="list_left_span">户名</span>
          <span class="list_right_span">{{ object.userName }}</span>
        </li>
        <li class="immediate_list">
          <span class="list_left_span">住址信息</span>
          <span class="list_right_span">{{ object.address }}</span>
        </li>
        <li class="immediate_list">
          <span class="list_left_span">当前可用金额</span>
          <span class="list_right_span">{{ object.available }}元</span>
        </li>
        <li class="immediate_list">
          <span class="list_left_span">当前欠费金额</span>
          <span class="list_right_span">{{ object.owed }}元</span>
        </li>
      </ul>
    </div>

    <div class="devide_div"></div>
    <div class="lifepay_devide_info">
      <div class="pay_number_title">充值金额</div>
      <div class="pay_numer_input">
        <span>￥</span>
        <input v-model="amount" type="number" placeholder="请输入充值金额" />
      </div>
    </div>
    <van-button
      :disabled="disabled"
      class="next_btn apply_btn"
      @click="immediatePay()"
      >立即缴费</van-button
    >
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import smartProperty from "@/controller/smartProperty.js";
import constant from "@/controller/constant.js";
var fromName = "";
export default {
  name: "immediatePpay",
  data() {
    return {
      amount: null,
      object: {},
      showLoading: false,
      fromName: "",
      isNewPay: false
    };
  },
  computed: {
    disabled() {
      return this.amount === null || this.amount === "";
    }
  },
  mounted() {
    this.showLoading = true
    this.isNewPay = this.$route.query.fromPage === "newPay";
    if (this.isNewPay) {
      this.object = this.$route.query.query;
      this.showLoading = false
    } else {
      this.getPaymentDetail(this.$route.query.id);
    }
  },
  methods: {
    getPaymentDetail(id) {
      smartProperty
        .community_payment_group_item(id)
        .then(res => {
          if (res.code === "0") {
            this.object = res.datas;
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    immediatePay() {
      const data = {
        amount: this.amount,
        category: this.object.itemId,
        groupId: this.object.groupId,
        houseId: this.object.houseId,
        payType: 1,
        phone: JSON.parse(localStorage.getItem("userInfo")).currentUser.phone
      };
      this.showLoading = true;
      smartProperty
        .community_payment_record(data)
        .then(res => {
          if (res.code === "0") {
            this.$toast("缴费成功");
            if (fromName === "newPay") {
              this.$router.go(-2);
            } else {
              this.$router.go(-1);
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === "newPay" || from.name === "houseNumberManage") {
      fromName = "newPay";
    }
    next();
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/workstation.scss";

.immediate_pay {
  background: #ffffff;
  height: 100%;
  .pay_numer_input {
    border-bottom: 1px solid #edeff2;
    padding: 5px 0;
    margin: 0 15px;
    span {
      font-size: 20px;
      color: #999999;
    }
    input {
      font-size: 14px;
      border: none;
      margin-left: 8px;
    }
  }

  .pay_number_title {
    display: flex;
    flex-wrap: wrap;
    padding: 14px 15px;
    font-size: 16px;
    color: #333333;
  }

  .immediate_ul {
    padding: 0 15px;
  }

  .immediate_list {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333333;
    padding: 15px 0;
    border-bottom: 1px solid rgb(226, 226, 226);

    .list_left_span {
      float: left;
      width: 100px;
    }

    .list_right_span {
      float: right;
      width: 245px;
      text-align: right;
    }
  }

  // .immediate_list:first-child {
  //   padding-top: 20px;
  // }

  .immediate_list:last-child {
    border-bottom: none;
  }
}
</style>
